<template>
	<div>
		 <el-divider content-position="left"><span style="font-size: 1.15rem;">班级成绩查询</span><span style="margin-left: 2rem;margin-right:1rem;"></span>
		 </el-divider>

		 <div style="margin-top: 2rem;margin-top: 0.625rem;max-height: 65vh;overflow:auto;">
		     <table border="1">
		       <thead>
		         <tr>
		           <th>学号</th>
		           <th>姓名</th>
		           <th v-for="item,idx in kcs" :key="idx">{{item.name}}</th>
		           <th>总分</th>
		         </tr>
		       </thead>
		       <tbody>
		          <tr v-for="item,idx in cjb" :key="idx">
		            <td v-for="row,idx in item" :key="idx" >{{row}}</td>
		          </tr>
		       </tbody>
		     </table>
		 </div>
	</div>
</template>

<script>
	export default{
		data() {
			return {
				kcs:'',
				cjb:''
			}
		},
		created() {
			this.$ajax.post("grade/peasonBjId",{}).then(res=>{
				var bjId=res.data.data;
				this.$ajax.post("grade/bjkcs",{"bjId":bjId}).then(res=>{
					var result = res.data;
					if(result.success){
					  this.kcs=result.data;
					  }
				})

				this.$ajax.post('grade/bjcjb',{"bjId":bjId}).then(res=>{
				  var result = res.data;
				  if(result.success){
				    this.cjb=result.data;
				    }
				})
			})
		}
	}
</script>

<style scoped>
	table{
	   border-collapse:collapse;
	   width: 100%;
	   text-align: left;
	   font-size: 14px;

	}
	tbody tr{
	      font-size: 14px;
	      color: #606266;

	}
	thead{
	  color: #909399;
	  font-weight: 500;
	}
	th{
	  border: 1px solid #EBEEF5;
	  padding: 0.9rem 0.5rem 0.9rem 0.5rem ;
	}
	td{
	  border: 1px solid #EBEEF5;
	  padding: 1.15rem 0.5rem 1.15rem 0.5rem ;
	 }
	 tbody tr:hover{
	   background-color: #F7F9FB;
	 }
</style>
